<template>
	<MkDrawer v-model:isEdit="isEdit" ref="drawerRef">
		<el-container class="edit-container">
			<MkCardForm :model="form" title="血站信息" ref="formRef">
				<MkInput v-model="form.fileSource" label="文件来源" prop="fileSource" :isEdit="isEdit" />
			</MkCardForm>
			<MkCardForm :model="form" title="添加规则" ref="formRef" class="edit-card">
				<div class="rule-form">
					<MkInput v-model="ruleForm.fileColumnName" label="文件列名" prop="fileColumnName" :isEdit="isEdit" />
					<MkInput v-model="ruleForm.bloodAttribute" label="血液属性" prop="bloodAttribute" :isEdit="isEdit" />
					<el-button type="primary" :disabled="!isEdit">添加</el-button>
				</div>
				<MkTable :data="ruleList" style="width: 100%">
					<MkColumn type="index" label="序号" width="50" />
					<MkColumn label="文件列名" />
					<MkColumn label="血液属性 " />
					<MkColumn label="操作" width="50" />
				</MkTable>
			</MkCardForm>
		</el-container>
	</MkDrawer>
</template>
<script setup lang="ts">
/**
 * 侧边栏显示状态
 */
const drawerRef = ref<any>();
/**
 * 表单显示状态
 */
const formRef = ref<any>();
/**
 * 是否处于编辑状态
 */
const isEdit = ref(false);
/**
 * 打开侧边栏
 */
const openDrawerHandler = () => {
	drawerRef.value?.show();
};
/**
 * 关闭侧边栏
 */
const closeDrawerHandler = () => {
	drawerRef.value?.close();
};
/**
 * 表单数据
 */
const form = ref({
	fileSource: '',
});
/**
 * 规则表单数据
 */
const ruleForm = ref({
	fileColumnName: '',
	bloodAttribute: '',
});
/**
 * 规则列表数据
 */
const ruleList = ref([]);
defineExpose({
	openDrawerHandler,
	closeDrawerHandler,
});
</script>
<style lang="scss" scoped>
.edit-container {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.rule-form {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

:deep(.edit-card .el-form) {
	width: 100%;
}
</style>
